<script setup lang="ts">
import { ref, watch } from 'vue'
import layoutNav from './components/layoutNav.vue'
import layoutHeader from './components/layoutHeader.vue'
import Breadcrumb from '@/components/Breadcrumb.vue'

// 侧边栏收缩状态
const isCollapsed = ref(false)

// 侧边栏宽度
const sidebarWidth = ref('25vh')

// 监听侧边栏收缩状态变化
const handleCollapse = (collapsed) => {
  isCollapsed.value = collapsed
  sidebarWidth.value = collapsed ? '64px' : '25vh'
}
</script>

<template>
  <el-container class="layout-container">
    <el-header class="header-container">
      <layoutHeader />
    </el-header>

    <el-container class="main-container">
      <el-aside :width="sidebarWidth" class="nav-container">
        <layoutNav @collapse-change="handleCollapse" />
      </el-aside>

      <el-main class="content-container">
        <Breadcrumb />
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container {
  height: 100vh;
}

.header-container {
  padding: 0;
  z-index: 2000;
  position: relative;
}

.main-container {
  flex: 1;
}

.nav-container {
  background: var(--el-color-primary-light-8);
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  height: calc(100vh - 60px);
  z-index: 1000;
}

.content-container {
  margin-left: v-bind(sidebarWidth);
  padding: 20px;
  width: calc(100% - v-bind(sidebarWidth));
  transition: all 0.3s;
}
</style>
